<template>
  <div class="header vux-1px-b">
    <a href="javascript:history.go(-1)" v-show="goBack" class="left">
      <i class=""></i>
      返回
    </a>
    <h2 v-show="title!=='首页'">{{title}}</h2>
    <h2 v-show="title=='首页'" class="logo"><img v-src="'/static/img/z-logo.png'" alt=""></h2>
    <a v-show="searchIocn " class="right" :href="toSearchUrl"></a>
    <a v-show="helpTip " class="go_help" href="##"><i class="icons"></i><span>帮助</span></a>
  </div>
</template>
<script>
  export default{
    props:{
      title:{
        type:String,
        default:'首页'
      },
      goBack:{
        type:Boolean,
        default:false
      },
      searchIocn:{
        type:Boolean,
        default:true
      },
      helpTip:{
        type:Boolean,
        default:false
      }
    },
    data(){
      return {
        toSearchUrl:`${cdnBase}/html/searchVoucher.html`
      }
    },
    mounted(){
    }
  }
</script>
<style lang="less" scoped>
  .header{
    position: relative;
    padding: 10.5px 0;
    text-align: center;
    background-color: #fff;
    .logo{
    width:70px;
      margin:0 auto;
    }
    h2{
      font-size: 18px;
      color: #333;
      font-weight: 500;
    }
    .left{
      position: absolute;
      top: 14px;
      left: 10px;
      height: 20px;
      vertical-align: baseline;
      color:#333;
      font-size:14px;
      i{
        display: inline-block;
        width: 11.5px;
        height: 21px;
        margin-right: 5px;
        vertical-align: middle;
        background: url(https://appimg.huim.com/mimg/m_ico.png) no-repeat 0 -335px ;
        background-size: 201.5px auto;
      }
    }
    a {
      &.right{
        position: absolute;
        right: 14px;
        top: 14px;
        width: 30px;
        height: 25px;
        background: url(../../../static/img/search.png) no-repeat;
        background-size: 100% 100%;
      }
      &.go_help{
        position: absolute;
        right: 14px;
        top: 15px;
        color: #757380;
        font-size: 100%;
        vertical-align: baseline;
        .icons{
          display: inline-block;
          width: 15px;
          height: 14px;
          margin-right: 3px;
          background-position: -36px -106px;
          vertical-align: middle;
          background-image: url(https://appimg.huim.com/images/souquan/sqt_ico.png?v=0516);
          background-size: 80px auto;
          background-repeat: no-repeat;
        }
        span{
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
</style>
